<<<<<<< HEAD
<!--
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-06-09 19:38:06
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-06-10 18:54:44
 * @FilePath: \vue 小U到家\src\views\Mainyonghuxiangqin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <el-container>
    <el-header>
      <div id="footdiv">
        <el-button class="but" @click="yonghu">返回</el-button>
        <span class="span">订单状态：已完成</span>
      </div>
    </el-header>
    <el-main>
      <!-- 分割线 -->
      <el-divider content-position="right"></el-divider>
      <el-descriptions title="基本信息" class="yhxqBig" :column="4">
        <el-descriptions-item class="yhxq" label="用户" width="100px">{{
          yhxqUserName
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="电话">{{ yhxqUserTel }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="最后活跃时间">{{
          yhxqUserLastTime
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="订单总数">{{
          yhxqDingDanTotal
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="right"></el-divider>
      <el-descriptions title="收货地址" class="yhxqBig" :column="4">
        <el-descriptions-item class="yhxq" label="收货人" width="100px">{{
          yhxqShouHuoRen
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="电话">{{ yhxqShouHuoTel }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="备用电话">{{
          yhxqBeiYongTel
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="收货地址">{{
          yhxqShouHuoDiZhi
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="right"></el-divider>

      <Maintable :tableData="yhxianqingArr">
        <template v-slot:tableline>
          <el-table-column prop="number" label="订单编号" width="100"> </el-table-column>
          <el-table-column prop="huowu" label="货物类别" width="80"> </el-table-column>
          <el-table-column prop="spnb" label="商品数量" width="80"> </el-table-column>
          <el-table-column prop="boxnb" label="箱数" width="60"> </el-table-column>
          <el-table-column prop="money" label="金额" width="60"> </el-table-column>
          <el-table-column prop="havry" label="重量" width="60"> </el-table-column>
          <el-table-column prop="ordersta" label="订单状态" width="80"> </el-table-column>
          <el-table-column prop="sjr" label="收件人" width="80"> </el-table-column>
          <el-table-column prop="phone" label="联系方式" width="120"> </el-table-column>
          <el-table-column prop="psr" label="配送人" width="80"> </el-table-column>
          <el-table-column prop="peisj" label="配送时间" width="100"> </el-table-column>
          <el-table-column prop="pro" label="时效产品" width="80"> </el-table-column>
          <el-table-column prop="name" label="所属站点" width="80"> </el-table-column>
        </template>
        <template v-slot:chaozuo>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                type="success"
                slot="reference"
                plain
                icon="el-icon-view"
                title="查看"
                @click="yhxqChaKan"
              >
              </el-button>
            </template>
          </el-table-column>
        </template>
      </Maintable>
    </el-main>
    <el-footer>
      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[4, 5, 6, 8]"
          :page-size="100"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </div>
    </el-footer>
  </el-container>
</template>

<script>
import Maintable from "../components/main/Maintable";
export default {
  name: "Mainyonghuxiangqin",
  components: {
    Maintable,
  },
  computed: {},
  data() {
    return {
      size: 4,
      page: 1,
      total: 0,
      currentPage: 1,
      yhxianqingArr: [],
      yhxqUserName: "张大爷",
      yhxqUserTel: "1279736962",
      yhxqUserLastTime: "2013-10-12",
      yhxqDingDanTotal: "1273",
      yhxqShouHuoRen: "王哈桑",
      yhxqShouHuoTel: "12683687942",
      yhxqBeiYongTel: "184818779974",
      yhxqShouHuoDiZhi: "重庆市步行街撒气快到了青年对话框",
    };
  },
  methods: {
    yonghu() {
      this.$router.push("/yonghu");
    },
    handleSizeChange(val) {
      this.size = val;
      console.log(`每页 ${val} 条`);
      // this.selects();
    },
    handleCurrentChange(val) {
      this.page = val;
      console.log(`当前页: ${val}`);
      // this.selects();
    },
    yhxqChaKan() {
      this.$router.push({ path: "/paisongdingdanxiangqin" });
    },
  },
};
</script>

<style lang="less" scoped>
.yhxqBig {
  width: 90%;
  margin: 30px 5%;
  .block {
    margin: 0 130px;
    float: right;
  }
  .yhxq {
    width: 20%;
    padding: 0 2.5%;
  }
}

.yhxqBig /deep/ .yhxq {
  width: 20px;
}
#footdiv {
  overflow: hidden;
  height: 50px;
  .but {
    float: left;
    display: block;
    margin: 10px 0;
    width: 100px;
    // height: 50px;
    // line-height: 40px;
  }
  .span {
    float: right;
    display: block;
    margin: 10px 0;
    width: 150px;
    height: 50px;
    line-height: 50px;
  }
}
</style>
=======
<!--
 * @Author: Xia_cc 978487464@qq.com
 * @Date: 2022-06-09 19:38:06
 * @LastEditors: Xia_cc 978487464@qq.com
 * @LastEditTime: 2022-06-10 18:54:44
 * @FilePath: \vue 小U到家\src\views\Mainyonghuxiangqin.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<!--  -->
<template>
  <el-container>
    <el-header>
      <div id="footdiv">
        <el-button class="but">返回</el-button>
        <span class="span">订单状态：已完成</span>
      </div>
      <!-- 分割线 -->
      <el-divider content-position="right"></el-divider>
      <el-descriptions title="基本信息" class="yhxqBig" column="4">
        <el-descriptions-item class="yhxq" label="用户" width="100px">{{
          yhxqUserName
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="电话">{{ yhxqUserTel }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="最后活跃时间">{{
          yhxqUserLastTime
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="订单总数">{{
          yhxqDingDanTotal
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="right"></el-divider>
      <el-descriptions title="收货地址" class="yhxqBig" column="4">
        <el-descriptions-item class="yhxq" label="收货人" width="100px">{{
          yhxqShouHuoRen
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="电话">{{ yhxqShouHuoTel }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="备用电话">{{
          yhxqBeiYongTel
        }}</el-descriptions-item>
        <el-descriptions-item class="yhxq" label="收货地址">{{
          yhxqShouHuoDiZhi
        }}</el-descriptions-item>
      </el-descriptions>
      <el-divider content-position="right"></el-divider>
    </el-header>

    <!-- <el-main> -->
    <Maintable class="yhxqDingDan">
      <template v-slot:tableline>
        <el-table-column prop="number" label="订单编号" width="100"> </el-table-column>
        <el-table-column prop="huowu" label="货物类别" width="80"> </el-table-column>
        <el-table-column prop="spnb" label="商品数量" width="80"> </el-table-column>
        <el-table-column prop="boxnb" label="箱数" width="60"> </el-table-column>
        <el-table-column prop="money" label="金额" width="60"> </el-table-column>
        <el-table-column prop="havry" label="重量" width="60"> </el-table-column>
        <el-table-column prop="ordersta" label="订单状态" width="80"> </el-table-column>
        <el-table-column prop="sjr" label="收件人" width="80"> </el-table-column>
        <el-table-column prop="phone" label="联系方式" width="120"> </el-table-column>
        <el-table-column prop="psr" label="配送人" width="80"> </el-table-column>
        <el-table-column prop="peisj" label="配送时间" width="100"> </el-table-column>
        <el-table-column prop="pro" label="时效产品" width="80"> </el-table-column>
        <el-table-column prop="name" label="所属站点" width="80"> </el-table-column>
      </template>
      <template v-slot:chaozuo>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              type="success"
              slot="reference"
              plain
              icon="el-icon-view"
              title="查看"
              @click="yhxqChaKan"
            >
            </el-button>
          </template>
        </el-table-column>
      </template>
    </Maintable>
    <!-- </el-main> -->
  </el-container>
</template>

<script>
import Maintable from "../components/main/Maintable";
export default {
  name: "Mainyonghuxiangqin",
  components: {
    Maintable,
  },
  computed: {},
  data() {
    return {
      yhxqUserName: "张大爷",
      yhxqUserTel: "1279736962",
      yhxqUserLastTime: "2013-10-12",
      yhxqDingDanTotal: "1273",
      yhxqShouHuoRen: "王哈桑",
      yhxqShouHuoTel: "12683687942",
      yhxqBeiYongTel: "184818779974",
      yhxqShouHuoDiZhi: "重庆市步行街撒气快到了青年对话框",
    };
  },
  methods: {
    yhxqChaKan() {
      this.$router.push({ path: "/paisongdingdanxiangqin" });
    },
  },
};
</script>

<style lang="less" scoped>
.yhxqBig {
  width: 90%;
  margin: 30px 5%;

  .yhxq {
    width: 20%;
    padding: 0 2.5%;
  }
}

.yhxqDingDan {
  margin: 340px 0;
}

.yhxqBig /deep/ .yhxq {
  width: 20px;
}
#footdiv {
  overflow: hidden;
  height: 50px;
  .but {
    float: left;
    display: block;
    margin: 10px 0;
    width: 100px;
    // height: 50px;
    // line-height: 40px;
  }
  .span {
    float: right;
    display: block;
    margin: 10px 0;
    width: 150px;
    height: 50px;
    line-height: 50px;
  }
}
</style>
>>>>>>> ae27e4fe2d4f939d0b0ee2bfa506b9e3269c53cb
